body {
    background: linear-gradient(135deg, #f5f6fa 60%, #e0e7ff 100%);
    min-height: 100vh;
    font-family: 'Noto Sans SC', Arial, sans-serif;
}
.game-container {
    max-width: 600px;
    margin: 40px auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 36px 36px 40px 36px;
    position: relative;
}
h1 {
    text-align: center;
    color: #3a405a;
    margin-bottom: 30px;
}
.tab-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
    gap: 16px;
}
.tab-btn {
    background: #e0e7ff;
    color: #232946;
    border: none;
    border-radius: 6px;
    padding: 8px 24px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background 0.2s;
}
.tab-btn.active, .tab-btn:hover { background: #4f8cff; color: #fff; }
.tab-content { min-height: 220px; }
#quizArea, #testArea { margin-bottom: 18px; }
button { font-size: 1em; }
#puzzleBoard div {
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s;
}
#puzzleBoard div:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
#planeTab {
  text-align: center;
}
#planeGame {
  display: block;
  margin: 0 auto;
}